<template>
  <div class="code-container" @click="containerClick">
    <div class="code-content"><div v-html="html"></div></div>
    <div class="code-close" @click="$emit('close')">x</div>
  </div>
</template>
<script>
import MarkdownIt  from 'markdown-it';
const md = MarkdownIt();

export default {
  props: ["code"],
  computed:{
    html(){
      return md.render(this.code);
    }
  },
  methods: {
    containerClick(event) {
      if (event.target.classList.contains("code-container")) {
        this.$emit("close");
      }
    },
  },
};
</script>

<style>
.code-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
}
.code-container table{
  width: 100%;
}
.code-container table tr{
  text-align: left
}
.code-close {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 13px;
  border: 2px solid #fff;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  transition: color, border 0.2s;
}
.code-close:hover {
  border-color: #e64340;
  color: #e64340;
}
.code-content {
  box-sizing: border-box;
  width: 50%;
  height: 600px;
  padding: 20px;
  margin: auto;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #333;
  color: #1aad19;
  margin-top: calc(50vh - 300px);
  overflow-x: auto;
}
</style>
